<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>购物车预览</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <link rel="stylesheet" href="/css/cart.css"/>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/json2.js"></script>
    <script type="text/javascript" src="/js/Cart.js"></script>
</head>

<body class="wx">

<div class="header">
    <div class="left"><i class="icon-back"></i>菜单</div>
    <div class="title">确认订单</div>
</div>

<div class="order-body">
    <div class="food-list">
        <div id="repeat-food-item" class="food-item" style="display: none;">
            <div class="menu-name">天目湖剁椒鱼头</div>
            <span class="price-wrapper"><span class="unitPrice">￥78</span><span class="count">*3</span></span>
            <span class="price">￥200</span>
        </div>
    </div>

    <div class="summary">
        <div class="summary-line">
            <span class="summary-left">小计:</span>
            <span id="total" class="summary-right">￥400</span>
        </div>
        <div class="summary-line">
            <span class="summary-left">优惠:</span>
            <span class="summary-right">无</span>
        </div>
        <div id="final-total" class="total">总计：374.88</div>
        <button id="confirm" class="btn book">确定</button>
    </div>

</div>

<script th:inline="javascript">
    (function(){


        $.ready(function(){
            $(body).on('touchmove',function(event){
                if(event.target == this){
                    event.preventDefault();
                }
            })
        });

        var cart = new Cart();
        showFoodList();
        setSummary();

        $('#confirm').click(function(){
            var order = cart.getOrder();
            $.post('/api/order/',order,function(data){
                console.log(data);
                cart.clear();
                location.href='order.html';
            },'json');
        });

        function showFoodList(){
            var foods = cart.getOrder().foods;

            $(foods).each(function(key,food){
                var $item = cloneItem();
                $item.find('.menu-name').text(food.name);
                $item.find('.unitPrice').text('￥' + food.price);
                $item.find('.count').text('*'+food.count);
                $item.find('.price').text('￥' + (food.price * food.count));
                $repeatItem.before($item);
            });

        }
        
        function setSummary() {

            var price = cart.getPrice();

            $('#total').text('￥' + price);
            $('#final-total').text('￥' + price);
        }

        var $repeatItem = undefined;
        function cloneItem(){
            if(!$repeatItem){
                $repeatItem = $('#repeat-food-item');
            }
            var $item = $repeatItem.clone();
            $item.attr('id',Date.now());
            $item.show();
            return $item;
        }
    })();
</script>
</body>

</html>